<template> 
    <div class="header">
        <h2>设备管理</h2> <!-- 标题改为当前页面名称 -->
        <div class="user-info">
            <!-- ... 用户信息代码直接从Home.vue复制过来 ... -->
            <div class="user-avatar">
                <img src="" alt="用户头像">
            </div>
            <div class="user-details">
                <div>管理员</div>
                <small>最后登录: 今天 09:30</small>
                <div @click="logout" class="logout-link">登出</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
/**
* 数据部分
*/
const data = reactive({})

</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.header h2 {
    color: #1a1a1a;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 0.75rem;
}

.logout-link {
    cursor: pointer;
    color: #2c80ff;
    font-weight: 500;
}

.logout-link:hover {
    text-decoration: underline;
}
</style>